<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../node_modules/react/umd/react.development.js"></script>
        <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="../node_modules/babel-standalone/babel.min.js"></script>
        <script src="../node_modules/prop-types/prop-types.js"></script>
    </head>
    <body>
        <div id="reactDom"></div>
        <script type="text/babel">

            // react事件处理   react绑定事件使用的是小驼峰命名法
            // 1.修改this指向
            // 1.bind方式原地修改
            // 2.函数通过箭头函数进行创建
            // 3.constructor中提前绑定
            // 4.把事件的调用写成箭头函数的调用方式

            class  Com extends React.Component {
                constructor(props){
                    super(props)
                    this.func=this.func.bind(this)
                }
                funa(){
                    console.log(this)
                }
                funb=()=>{
                    console.log(this)
                }
                func(){
                    console.log(this)
                }
                fund(){
                    console.log(this)
                }
                fune=(i){
                    console.log(i)
                }
                render(){
                    return(
                        <div>
                            我是组件
                            <button onClick={this.funa.bind(this)}>bing方式绑定</button>
                            <button onClick={this.funb}>箭头函数绑定</button>
                            <button onClick={this.func}>提前绑定</button>
                            <button onClick={()=>{this.fund()}}>调用方式为箭头函数</button>
                            <button onClick={()=>{this.fune.bind(this,'我是参数')}}>点我传递实参</button>
                        </div>
                    )
                }
            }

            ReactDOM.render(<Com />, document.getElementById("reactDom"));
        </script>
    </body>
</html>
